import { LegacyRef, useContext } from 'react';
import { ThemeContext } from 'src/context/ThemeContext';
import IcClose from 'src/image/ic-close.svg';
import style from './Toast.module.scss';

type Props = {
  message?: string;
  onClose: () => void;
  onNavigate?: () => void;
  top: number;
  myRef: LegacyRef<HTMLDivElement>;
};

const Toast = ({ message, onClose, onNavigate, top, myRef }: Props) => {
  const { IcGoMessage } = useContext(ThemeContext).image;

  return (
    <div className={style.self} style={{ top }} ref={myRef}>
      <div className={style.bar}>
        <img src={IcClose} onClick={onClose} />
      </div>
      <div className={style.message}>
        <div>{message}</div>
        <img
          src={IcGoMessage}
          onClick={() => {
            onClose();
            onNavigate && onNavigate();
          }}
        />
      </div>
    </div>
  );
};

export default Toast;
